<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=0.6, maximum-scale=1.0, minimum-scale=0.6, user-scalable=no">
  <title>Iris-light-for-Gabrielle</title>
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.3.1/socket.io.min.js"></script> -->
  <style>
    body {
      background-color: #fbfdfc;
      margin: 0;
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 0px;
      transform: scale(1);
      transform-origin: top;
      zoom: 0.8;
    }
    .wrap {
      position: relative;
      width: 33.33%;
      margin: -72px 0;
      top: 50%;
      float: left;
    }
    .color-selector input[type="color"] {
      width: 40px;
      height: 40px;
    }
    .output {
      margin-top: 40px;
    }

    .log-output {
      margin-top: 40px;
      text-align: center;
    }

    .log-output label {
      display: block;
    }

    .log-output textarea {
      margin-top: 20px;
      border: 1px solid #ccc;
      padding: 20px;
      width: 600px;
      height: 400px;
      overflow: auto;
    }
    .slider-v1 {
      position: relative;
      display: block;
      width: 5.5em;
      height: 3em;
      cursor: pointer;
      border-radius: 1.5em;
      transition: 350ms;
      background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0)), #dddddd;
      box-shadow: 0 0.07em 0.1em -0.1em rgba(0, 0, 0, 0.4) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7);
    }
    .slider-v1::before {
      position: absolute;
      content: '';
      width: 2em;
      height: 2em;
      top: 0.5em;
      left: 0.5em;
      border-radius: 50%;
      transition: 250ms ease-in-out;
      background: linear-gradient(#f5f5f5 10%, #eeeeee);
      box-shadow: 0 0.1em 0.15em -0.05em rgba(255, 255, 255, 0.9) inset, 0 0.5em 0.3em -0.1em rgba(0, 0, 0, 0.25);
    }
    .slider-v1::after {
      position: absolute;
      content: '';
      width: 1em;
      height: 1em;
      top: 1em;
      left: 6em;
      border-radius: 50%;
      transition: 250ms ease-in;
      background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #dddddd;
      box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), -7.25em 0 0 -0.25em rgba(0, 0, 0, 0.3);
    }
    input:checked + .slider-v1::after {
      background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #44cc66;
      box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), -7.25em 0 0 -0.25em rgba(0, 0, 0, 0.12);
    }
    input:checked + .slider-v1::before {
      left: 3em;
    }
    .container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border: 0px solid #ccc;
      padding: 20px;
      margin: 20px;
    }
    .setting-item-checkbox {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      border: 2px solid #ccc;
      padding: 20px;
      border-radius: 10px;
      background-color: #ffffff; /* 或者可以使用 background-color: white; */
    }

    .setting-item-row {
      width: 550px; /* 设置宽度为 400px */
      height: 30px; /* 设置高度为 30px */
      max-width: 600px; /* 设置最大宽度为 600px */
      max-height: 30px; /* 设置最大高度为 300px */
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      border: 2px solid #ccc;
      padding: 20px;
      border-radius: 10px;
      background-color: #ffffff; /* 或者可以使用 background-color: white; */
    }
    .label-wrapper {
      margin-right: 1em; /* 可根据需要调整开关标签与按钮之间的距离 */
    }
    .setting-item-column {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border: 2px solid #ccc;
      padding: 20px;
      border-radius: 10px;
      background-color: #ffffff; /* 或者可以使用 background-color: white; */
    }
    .content{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border: 0px solid #ccc;
      padding: 20px;
      border-radius: 10px;
      background-color: #fbfdfc;   
    }
    .timer-slider {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      width: 500px;
      height: 40px;
      margin: 0 auto 40px;
      border: 2px solid #ccc;
      padding: 20px;
      border-radius: 15px;
      background-color: #ffffff;
    }
    .timer-slider label {
      margin-right: 10px;
      font-size: 30px; /* 调整为合适的大小，单位可以是像素(px)、em等 */
    }

    .timer-slider input {
      margin-right: 20px;
    }
    .wrap {
      position: relative;
      /* width: 33.33%; */
      margin: 20px;
      top: 50%;
      /* float: left; */
    }

    .wrap label {
      margin: 1.5em auto;
      -webkit-tap-highlight-color: transparent; /* 取消高亮 */
      outline: none; /* 取消点击效果的边框 */
    }
    .wrap input {
      position: absolute;
      left: -9999px;
    }
    .color-picker-image {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent; /* 取消高亮 */
    }
    * {
      caret-color: transparent;
    }
    .color-selector {
      display: none;
      position: absolute;
    }
    /* 移除默认样式 */
    input[type="range"] {
      -webkit-appearance: none; /* 针对部分浏览器 */
      appearance: none;
      width: 100%;
      height: 10px;
      border-radius: 5px;
      background: #ddd; /* 默认滑块轨道的颜色 */
    }

    /* 自定义滑块轨道 */
    input[type="range"]::-webkit-slider-runnable-track {
      height: 10px;
      border-radius: 5px;
      background: linear-gradient(to right,#69ff97,#00e4ff)
    }

    /* 自定义滑块样式 */
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none; /* 针对部分浏览器 */
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: linear-gradient(to right,#69ff97,#00e4ff); /* 初始样式，也是选中状态下的样式 */
      cursor: pointer;
      margin-top: -5px; /* 调整滑块的垂直位置，使其在轨道中居中 */
    }

    当滑块为最小值时的样式
    input[type="range"]:focus::-webkit-slider-thumb {
      background: linear-gradient(to right,#69ff97,#00e4ff)
    }

    /* 当滑块为最大值时的样式 */
    input[type="range"]::-webkit-slider-thumb:active {
      background: linear-gradient(to right,#69ff97,#00e4ff)
    }
  </style>
</head>
<body>
  <h1>🎉 Iris-light</h1>
  <div class="color-selector">
    <input type="color" id="color-picker">
  </div>
  <div class="content">
      <!-- <img class ="iris-image" src = "../003.jpg" alt = "鸢尾花简笔画"> -->
      <img class="color-picker-image" src="../003.jpg" alt="鸢尾花简笔画">
      <div class="wrap">
        <input type="checkbox" id="s1">
        <label class="slider-v1" for="s1"></label>
      </div>
      <div class="timer-slider" >
        <label for="timer" id="timer-label">⏳</label>
        <input type="range" id="timer" min="0" max="120" step="1" >
        <output for="timer" id="timer-value" " >0 分</output> 
      </div>
  </div>
  
  <div class="invisible" hidden="hidden">
    <div class="output" >
      <label for="color-output">选择的颜色值：</label>
      <input type="text" id="color-output" readonly>
    </div>
  
    <div class="current-color-output" >
      <label for="current-color-output">当前灯颜色：</label>
      <input type="text" id="current-color-output" readonly>
    </div>
  
    <div class="log-output" >
      <label for="log">日志信息：</label>
      <textarea id="log" readonly></textarea>
    </div>
  </div>
  
  <div id="author" class="author" hidden="hidden">
    <p>作者：liankafohali</p>
  </div>

  <script>
    // 获取颜色选择器和颜色输出框的元素
    const colorPicker = document.getElementById('color-picker');
    const colorOutput = document.getElementById('color-output');

    // 监听颜色选择器的变化事件
    colorPicker.addEventListener('input', function() {
      // 将选择的颜色值显示在颜色输出框中
      colorOutput.value = colorPicker.value;

      // 发送颜色值到后端服务器
      syncColorValue(colorPicker.value);
    });

    // 监听图片的点击事件，触发颜色选择器的点击事件
    const colorPickerImage = document.querySelector('.color-picker-image');

    colorPickerImage.addEventListener('click', function(event) {
      // Prevent the default click behavior to avoid interference with the color picker dialog
      event.preventDefault();

      // Get the clicked position coordinates
      const clickedX = event.clientX;
      const clickedY = event.clientY;

      // Set the color selector's position to the clicked coordinates
      colorPicker.style.left = `${clickedX}px`;
      colorPicker.style.top = `${clickedY}px`;

      // Trigger a click event on the hidden color picker input to open the color picker dialog
      colorPicker.click();
    });
    // 获取定时设置条和定时输出框的元素
    const timerSlider = document.getElementById('timer');
    const timerValue = document.getElementById('timer-value');
    const timerLabel = document.getElementById('timer-label');
    // 监听定时设置条的变化事件
    timerSlider.addEventListener('input', function() {
      // 将选择的定时时间显示在定时输出框中
      timerValue.textContent = timerSlider.value + "分";
      const value = parseInt(timerSlider.value); // 获取滑动条的值并转为整数

      // 根据滑动条的值设置对应的表情符号
      if (value === 0) {
        timerLabel.textContent = '⏱️';
      } else if (value === parseInt(timerSlider.max)) {
        timerLabel.textContent = '⌛';
      } else {
        timerLabel.textContent = '⏳';
      }
      // 发送定时时间到后端服务器
      syncTimerValue(timerSlider.value);
    });

    const customSwitch = document.getElementById('s1');
    // 设置灯的状态变量，默认为开灯
    let isLightOn = true;

    //获取服务器端灯的状态
    getLightStatus();

    // 获取当前灯颜色
    getCurrentColor();

    customSwitch.addEventListener('click', function() {
      // 切换灯的状态
      isLightOn = !isLightOn;

      // 根据灯的状态更新输出信息
      if (isLightOn) {
        logMessage('灯已打开');
      } else {
        logMessage('灯已关闭');
      }

      // 发送灯的状态到后端服务器
      syncLightStatus(isLightOn);
    });

    // 模拟后端发送的日志信息
    function logMessage(message) {
      // 获取日志文本区域的元素
      const logOutput = document.getElementById('log');
      const currentTime = new Date().toLocaleTimeString();
      logOutput.value += '[' + currentTime + '] ' + message + '\n';
      logOutput.scrollTop = logOutput.scrollHeight; // 滚动到底部
    }

    // 获取当前灯颜色的功能
    function getCurrentColor() {
        // 发送 GET 请求
        fetch('/get-current-color')
            .then(response => {
                if (response.ok) {
                    return response.json();
                } else {
                    throw new Error('获取当前灯颜色时出现错误');
                }
            })
            .then(data => {
                // 处理获取到的数据
                const currentColorOutput = document.getElementById('current-color-output');
                currentColorOutput.value = `红色：${data.r}，绿色：${data.g}，蓝色：${data.b}`;

                // 设置颜色选择器的值为当前颜色
                const colorPicker = document.getElementById('color-picker');
                const currentColor = `#${data.r.toString(16).padStart(2, '0')}${data.g.toString(16).padStart(2, '0')}${data.b.toString(16).padStart(2, '0')}`;
                colorPicker.value = currentColor;
            })
            .catch(error => {
                console.log('发生网络错误', error);
            });
    }

    // 发送颜色值到后端服务器
    function syncColorValue(color) {
      const data = { color: color };

      // 发送 POST 请求
      fetch('/sync-color-value', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
      })
        .then(response => {
          if (response.ok) {
            console.log('颜色值已成功同步到服务器');
          } else {
            console.log('同步颜色值时出现错误');
          }
        })
        .catch(error => {
          console.log('发生网络错误', error);
        });
    }

    // 发送定时时间到后端服务器
    function syncTimerValue(selectedTime) {
      const data = { selectedTime: selectedTime };

      // 发送 POST 请求
      fetch('/sync-timer-value', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
      })
        .then(response => {
          if (response.ok) {
            console.log('定时时间已成功同步到服务器');
          } else {
            console.log('同步定时时间时出现错误');
          }
        })
        .catch(error => {
          console.log('发生网络错误', error);
        });
    }

    // 发送灯的状态到后端服务器
    function syncLightStatus(isOn) {
      const data = { isOn: isOn };

      // 发送 POST 请求
      fetch('/sync-light-status', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
      })
        .then(response => {
          if (response.ok) {
            console.log('灯的状态已成功同步到服务器');
          } else {
            console.log('同步灯的状态时出现错误');
          }
        })
        .catch(error => {
          console.log('发生网络错误', error);
        });
    }
    // 获取灯的状态
    function getLightStatus() {
        // 发送 GET 请求
        fetch('/get-light-status')
          .then(response => {
            if (response.ok) {
              return response.json();
            } else {
              throw new Error('获取灯的状态时出现错误');
            }
          })
          .then(data => {
            // 处理获取到的数据
            isLightOn = data.isOn;
            // 进行其他操作，比如更新页面上的开关按钮状态等
            // 根据灯的状态更新开关按钮状态
            customSwitch.checked = isLightOn;
          })
          .catch(error => {
            console.log('发生网络错误', error);
          });
      }
      function updateTimerSlider(timerValue) {
      const timerSlider = document.getElementById('timer');
      timerSlider.value = timerValue;
      const timerValueOutput = document.getElementById('timer-value');
      timerValueOutput.textContent = `${timerValue} 分`;
    }

    // 定义定时发送请求的函数
    function fetchTimerFromServer() {
      getLightStatus();
      // 发送 GET 请求获取服务器存储的定时时间
      fetch('/get-timer-value')
      .then(response => {
            if (response.ok) {
              return response.json();
            } else {
              throw new Error('服务器存储的定时时间错误');
            }
          })
          .then(data => {
            // 处理获取到的数据
            updateTimerSlider(data.timerValue);
          })
          .catch(error => {
            console.log('发生网络错误', error);
          });
    }

    // 每隔一分钟执行一次fetchTimerFromServer函数
    setInterval(fetchTimerFromServer, 60000);

    // 页面加载完成后首次获取服务器上的定时时间
    fetchTimerFromServer();
  </script>
</body>
</html>
